import React from 'react';
import cx from 'classnames';
import styles from '../styles/form/image-input';
import {findDOMNode} from "react-dom";
import {jsonRequest} from '../../utils/request'
import MessageActions from '../actions/message'

export default React.createClass({
    propTypes: {
        name: React.PropTypes.string,
        defaultValue: React.PropTypes.string,
        max: React.PropTypes.number,
        label: React.PropTypes.string,
        isRequired: React.PropTypes.bool,
        defaultName: React.PropTypes.string,
        onChange: React.PropTypes.func,
    },

    getInitialState: function() {
        return {
            name: this.props.defaultName,
            result: this.props.defaultValue || '/assets/images/image-input/addImage.png',
            errMsg: null,
        };
    },

    componentWillReceiveProps: function(nextProps) {
        if(nextProps.defaultName){
            this.setState({'name': nextProps.defaultName});
        };
        if(nextProps.defaultValue){
            this.setState({'result': nextProps.defaultValue});
        };
    },

    render: function() {
        const errMsg = this.state.errMsg;
        return (
            <div className={cx('form-group', cx({'has-error': errMsg}))}>
                <div className="image-input">
                    <label htmlFor={"imageInput" + this.props.name}>{this.props.label}</label>
                    <input type="file" accept="image/*" ref="input" id={"imageInput" + this.props.name} onClick={this.onClick} onChange={this.readImage} />
                    <img className={"imageInput" + this.props.name} src={this.state.result} />
                </div>
                <div className={cx('error-message', cx({'hide': !errMsg}))}>{errMsg}</div>
            </div>
        )
    },

    readImage: function(event) {
        this.resetError();
        const file = event.target.files[0];
        let maxSize = this.props.max ? this.props.max : 5;
        if(file.size / 1024 / 1024 > maxSize) return this.setState({errMsg: "图片大小不得大于" + maxSize + 'M'});
        if(!/\.(jpg|png|gif|jpeg)$/i.test(file.name)) return this.setState({errMsg: "图片格式错误"});
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = () => {
            this.setState({result: reader.result, name: file.name});
            jsonRequest.post('/thirdapi/api/operApply/upload', {base64Str: reader.result}).then((res) => {
                const data = res.data;
                if (data.responseCode !== '00') return MessageActions.show({'message': res.data.responseMessage});
                let value = data.content.fileNo;
                if(this.props.onChange && typeof this.props.onChange === "function"){
                    if (this.props.name.indexOf('filed' > -1)) {
                        this.props.onChange(value, this.props.name);
                    }
                };
            })
        }
    },

    resetError: function() {
        this.setState({errMsg: null});
    },

    getValue: function() {
        //React.findDOMNode(this.refs.input).value = "";
        if((!this.state.result || this.state.result === this.props.defaultValue) && this.props.isRequired) return this.setState({errMsg: '请上传' + this.props.label});
        if(this.state.result === this.props.defaultValue) return {};
        // return {result: this.state.result, name: this.state.name};
        return this.state.result;
    }
})
